<template>
  <div class="manageTablePage">
    <div class="table" style="height: 90%; width: 50%">
      <el-table :border="true" style="height: 100%" :data="displayTableData">
        <el-table-column prop="serialNumber" label="序号" width="60">
          <template #default="scope">
            <div>
              {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="instructName" label="指令名称" width="160" />

        <el-table-column prop="domain" label="domain" width="130" />

        <el-table-column prop="intent" label="intent" width="200" />

        <el-table-column prop="slot" label="slot" width="200">
          <template #default="scope">
            <div v-for="(item, index) in getSlotObj(scope.row.slot)">
              {{ index + ": " + item }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              @click="editInstructs(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              :disabled="!(scope.$index != 0)"
              size="small"
              @click="handleServerUp(scope.$index, scope.row, true)"
              title="上移"
            >
              <el-icon><Top /></el-icon>
            </el-button>
            <el-button
              size="small"
              @click="handleServerUp(scope.$index, scope.row, false)"
              title="下移"
            >
              <el-icon><Bottom /></el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-config-provider :locale="zhCn">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 40, 60, 80]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          style="margin-top: 15px"
        >
        </el-pagination>
      </el-config-provider>
    </div>
    <div class="bert_div">
      <div
        class="card_div first_card_div"
        style="width: 200px; max-width: 200px"
      >
        <el-card>
          <template #header>
            <div class="card-header">
              <el-input
                v-model="domainInput"
                style="width: 150px"
                placeholder="domain"
                clearable
                spellcheck="false"
              />
            </div>
          </template>
          <p v-for="item in curDomainList" class="text item">{{ item }}</p>
        </el-card>
      </div>

      <div class="card_div" style="width: 320px; max-width: 320px">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-input
                v-model="intentInput"
                style="width: 270px"
                placeholder="intent"
                clearable
                spellcheck="false"
              />
            </div>
          </template>
          <p v-for="item in curIntentList" class="text item">{{ item }}</p>
        </el-card>
      </div>

      <div class="card_div" style="width: 200px; max-width: 200px">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-input
                v-model="slotItemInput"
                style="width: 160px"
                placeholder="slotItem"
                clearable
                spellcheck="false"
              />
            </div>
          </template>
          <p v-for="item in curSlotItemList" class="text item">{{ item }}</p>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script setup>
import { Bottom, Top } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { cloneDeep } from "lodash-es";
import { computed, ref, watch } from "vue";

// props中是readonly的，不能修改
// computed计算的也是readonly，不能修改
const props = defineProps({
  tableData: Array,
  domainArr: Array,
  intentArr: Array,
  slotItemArr: Array,
  editInstructs: Function,
  deleteInstructs: Function,
  remarkInstructs: Function,
  refresh: Function,
  changeBertPosition: Function,
});

const currentPage = ref(1);
const pageSize = ref(20);
const totalSize = ref(0);

const curDomainList = ref([]);
const curIntentList = ref([]);
const curSlotItemList = ref([]);

const domainInput = ref("");
const intentInput = ref("");
const slotItemInput = ref("");

const displayTableData = computed(() => {
  let arr = tableData.value.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value
  );
  arr.sort((x, y) => {
    return x.sortIdx - y.sortIdx;
  });
  return arr;
});

const tableData = computed(() => {
  const arr = cloneDeep(props.tableData);

  for (let i = 0; i < arr?.length; i++) {
    let item = arr?.[i];

    if (item && item.attribute) {
      item.sortIdx = item.attribute?.sortIdx;
    }
  }

  totalSize.value = arr.length;

  return arr || [];
});

const getSlotObj = (slot) => {
  if (!slot) {
    return {};
  }

  return JSON.parse(slot);
};

const handleServerUp = async (index, row, isUp) => {
  const tempTable = displayTableData.value;
  if (index >= tempTable.length - 1) {
    console.log("最后一个");
    return;
  }

  let curRow = row;
  let changeBert = null;
  if (isUp) {
    changeBert = tempTable[index - 1];
  } else {
    changeBert = tempTable[index + 1];
  }

  const curSortIdx = curRow.sortIdx;
  const changeSortIdx = changeBert.sortIdx;

  curRow.sortIdx = changeSortIdx;
  changeBert.sortIdx = curSortIdx;

  const result1 = await props.changeBertPosition?.(curRow);
  const result2 = await props.changeBertPosition?.(changeBert);

  if (result2 && result2.success) {
    ElMessage.success("操作成功");
    props.refresh?.();
  } else {
    ElMessage.error("网络异常");
  }
};

const editInstructs = (index, row) => {
  props.editInstructs(index, row);
};

const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`);
  pageSize.value = val;
  currentPage.value = 1;
};
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  currentPage.value = val;
};

watch(
  () => domainInput.value,
  (newVal, b) => {
    if (!newVal) {
      curDomainList.value = props.domainArr;
    } else {
      curDomainList.value = props.domainArr.filter(
        (x, y) => x.indexOf(newVal) != -1
      );
    }
  }
);
watch(
  () => intentInput.value,
  (newVal, b) => {
    if (!newVal) {
      curIntentList.value = props.intentArr;
    } else {
      curIntentList.value = props.intentArr.filter(
        (x, y) => x.indexOf(newVal) != -1
      );
    }
  }
);
watch(
  () => slotItemInput.value,
  (newVal, b) => {
    if (!newVal) {
      curSlotItemList.value = props.slotItemArr;
    } else {
      curSlotItemList.value = props.slotItemArr.filter(
        (x, y) => x.indexOf(newVal) != -1
      );
    }
  }
);

watch(
  () => props.domainArr,
  () => {
    curDomainList.value = props.domainArr;
  }
);
watch(
  () => props.intentArr,
  () => {
    curIntentList.value = props.intentArr;
  }
);
watch(
  () => props.slotItemArr,
  () => {
    curSlotItemList.value = props.slotItemArr;
  }
);
</script>

<style lang="scss" scoped>
.manageTablePage {
  height: 100%;
  overflow: auto;
  display: flex;

  .bert_div {
    display: flex;
    height: 90%;
    .card_div {
      max-height: 100%;
      margin-left: 35px;
    }

    .first_card_div {
      margin-left: 80px;
    }
  }
}

:deep(.el-table) {
  --el-table-row-hover-bg-color: none !important;
  --el-table-border-color: #aaaaaa !important;
  --el-table-border: 1px solid #ebeef5 !important;

  thead th {
    font-size: 16px !important;
    color: #5c5454 !important;
    background-color: #d9d9d9;
  }

  thead {
    border: 1px solid #999999;
  }
}

:deep(.el-card) {
  height: 100%;
  max-height: 100%;
  .el-card__body {
    overflow-y: scroll;
    height: inherit;
    max-height: calc(100% - 69px);

    padding: 5px 20px;

    margin-right: 3px; //适配滚动条间距
    padding: 0;

    .item {
      cursor: pointer;
      margin: 0;
      padding: 8px 20px;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  .el-card__body::-webkit-scrollbar {
    width: 7px;
    height: 1px;
  }
  .el-card__body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgb(236, 236, 234);
  }

  .el-card__body::-webkit-scrollbar-track {
    border-radius: 10px;
    background: white;
  }
}
</style>
